<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>OpenX Console</title>

<script language="javascript">
	function openDivShow(mapping, method, no) {
		// var width = 480;
		document.getElementById('lightShow').style.display = 'block';
		// document.getElementById('lightShow').style.width = width + "px";
		// document.getElementById('lightShow').style.marginLeft = -(width / 2) + "px";
		document.getElementById('fadeShow').style.display = 'block';
		doReady(mapping,method,no);
	}

	function closeDivShow() {
		document.getElementById("lightShow").style.display = 'none';
		document.getElementById("fadeShow").style.display = 'none';
	}

	function doReady(uri, method, no) {
		// reset
		document.getElementById('oxUri').innerHTML = "";
		document.getElementById('oxArgs').innerHTML = "";
		document.getElementById('oxArgs').value = "";
		document.getElementById('oxResult').innerHTML = "";
		// init
		document.getElementById('oxUri').innerHTML = uri + "/" + method;
		var oxArgs = document.getElementById('p' + no);
		if (oxArgs) {
			document.getElementById('oxArgs').value = oxArgs.innerText;
		}
	}
</script>

<style type="text/css">
	input,button,select,textarea {
		outline:none
	}
	textarea {
		resize:none
	}

	.div_overlay {
		display: none; position: fixed;
		top: 0%; left: 0%;
		width: 100%; height: 100%;
		background-color: black;
		z-index:1010;
		opacity:0.60; -moz-opacity: 0.60;
	}

	.div_content {
		display: none; position: fixed; padding: 10px;
		top: 35%; left: 40%;
		width: 600px; height: 360px;
		margin-left:-120px; margin-top:-80px;
		border: 3px solid #5797DC; border-radius: 5px;
		background-color: #F0F5F8;
		_position:absolute; z-index:1011; overflow: hidden;
	}
</style>
</head>

<body bgcolor="#F9F9F9">

	<div id="lightShow" class="div_content">
		<div>
			<div style="float: left"> URI: <span id="oxUri">...</span></div>
			<div style="float: right">
				<a href="javascript:closeDivShow()"> close </a>
			</div>
		</div>
		<textarea style="width:100%; height:5px; visibility:hidden"></textarea>
		<textarea id="oxArgs" rows="4" style="width:100%;font-size:15px; color:#5577dd"> </textarea>

		<div style="height: 40px; padding-top: 15px">
			<a href="javascript:doCall()">Call Service</a>
		</div>

		<textarea id="oxResult" rows="9" style="width:100%" readonly> </textarea>
	</div>

	<div id="fadeShow" class="div_overlay"> </div>

	<!-- main content place -->
	#body



<script language="javascript">
	var xhr;
	if (window.XMLHttpRequest) {
		xhr = new XMLHttpRequest();
	} else {
		xhr = new ActiveXObject('Microsoft.XMLHTTP');
	}

	function doCall(){
		xhr.open("POST", document.getElementById('oxUri').innerText, true);
		xhr.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");
		xhr.setRequestHeader("If-Modified-Since","0");
		xhr.setRequestHeader("Cache-Control","no-cache");

		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4) {
				var data = xhr.responseText;
				document.getElementById('oxResult').innerHTML = data;
			}
        };
        var args2 = document.getElementById('oxArgs').value;
		xhr.send(args2);
	}
</script>
</body>
</html>